<!--
 * @Description: 更新客户端密钥弹窗
 * @Author: chendingfengmail@163.com
 * @Date: 2021-11-09 11:10:13
 * @LastEditTime: 2022-01-10 15:40:21
 * @LastEditors: chendingfengmail@163.com
 * @Reference:
-->
<!-- 更新客户端密钥弹窗 -->
<template>
  <el-dialog
    custom-class="updateClientSecret_dialog"
    title="更新客户密钥"
    top="20vh"
    width="30%"
    center
    :visible.sync="visible"
    :before-close="modelClose"
    @open="modelOpen"
    :close-on-click-modal="false">
    <el-form :rules="updateClientSecretRules" ref="updateClientSecretForm" :model="modelData" v-loading="loading">
      <el-row>
        <el-col>
          <el-form-item label="厂家名称" :label-width="formLabelWidth" prop="manufacture">
            <el-input v-model="modelData.manufacture" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="客户Id" :label-width="formLabelWidth" prop="clientId">
            <el-input v-model="modelData.clientId" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item label="客户密钥" :label-width="formLabelWidth" prop="clientSecret">
            <el-input v-model="modelData.clientSecret" autocomplete="off" style="width:280px" placeholder="请输入新密钥并妥善保存"></el-input>
            <el-button type="primary" class="button" style="margin-top: 1px; height: 33px; margin-top: 2px" icon="el-icon-refresh" @click="createAppSecret()"></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="formSubmit" :loading="loading">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import util from '@/libs/util';

export default {
  name: 'updateClientSecretDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelData: {
      type: Object,
      default: () => {
        return {
          clientSecret: ''
        };
      },
    },
  },
  data() {
    return {
      formLabelWidth: '80px',
      loading: false,
      clientSecret: '',
      updateClientSecretRules: {
        clientSecret: this.$Validate.idNumber(true, '请输入新app密钥'),
      },
    };
  },
  methods: {
    // 对话框打开
    modelOpen() {
      this.modelData.clientSecret = util.generateUUID();
    },
    // secret生成
    createAppSecret(){
      //this.$set(this, 'modelData', this.modelData);
      //this.$set(this.modelData, 'clientSecret', util.generateUUID())
      this.modelData.clientSecret = util.generateUUID();
      this.$forceUpdate();
    },
    // 表单提交
    formSubmit() {
      this.$refs.updateClientSecretForm.validate((valid) => {
        if (valid) {
          let param = {
            clientId: this.modelData.clientId,
            clientSecret: this.modelData.clientSecret,
          };
          this.$api.clientDetails
            .updatePwd(param)
            .then((res) => {
              this.$message.success('密钥更新成功，请妥善保存');
              // 保存到txt文件
              util.commons.saveAsClientDetails(this.modelData, 'txt');
              this.modelClose();
              this.loading = false;
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
            });
        }
      });
    },

    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs.updateClientSecretForm.resetFields();
      });
    },
    // 对话框关闭
    modelClose() {
      this.resetForm();
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
  },
};
</script>
<style lang='scss' scoped>
.updateClientSecret_dialog {
  .button{
    margin-top: 1px;
    padding-left: 2px;
    padding-right: 10px;
    padding-top: 9px;
    width: 20px;
    height: 35px;
  }
}
</style>
